<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="胡爱静">
    <title>遮罩层</title>
    <style>
        body {
            margin: 0;
            background-color: #CCCCCC;
        }

        * {
            box-sizing: border-box;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box{
            width: 400px;
            margin: 10px auto;
            padding: 10px;
            background-color: #FFFFFF;
        }
       
        .top-list img {
            width: 370px;
            height: 400px;
        }
        
        .top-list p {
            text-indent: 2em;
            padding: 10px;
            margin: 0;
        }

        .bottom-list {
            width: 370px;
            display: flex;
            justify-content: space-between;
        }

        .bottom-list li{
            position: relative;
            overflow: hidden;  
        }

        .bottom-list img {
            width: 170px;
            height: 170px;
        }

        .corver {
            width: 100%;
            height: 100%;
            background-color: #666;
            opacity: 0.7;
            position: absolute;
            top: 0;
            display: none; 
        }
        .box-border{
             width: 410px; 
             height: 510px; 
             position: absolute; 
             margin: 0 auto; 
             left: calc(50% - 205px); 
             border: 5px solid red;
             opacity: 0;
        }

        .text{
            width: 170px;
            height: 170px;
            position: absolute;
            top: 0;
            padding: 15px;
            font-size: 14px;
            color: white;   
            left: -175px;
        }
        .text p,.text h4{
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="box-border"></div>
        <div class="box">
        <ul class="top-list">
            <li><img src="01.jpg" alt="">
            </li>
            <li>
                <p>商家介绍本店专营金熹女装，“金熹”即为“惊喜”。它会是你的衣橱至爱， 
                    在这里你将找到所有女人的时尚元素。
                </p>
            </li>
        </ul>
    </div>
    
    <div class="box">
        <ul class="bottom-list">
            <li>
                <div class="img">
                    <img src="02.jpg" alt="">
                </div>
                 <div class="corver"></div> 
                <div class="text">
                    <h4>金熹服饰</h4>
                    <p>商家介绍本店专营金熹女装，“金熹”即为“惊喜”。它会是你的衣橱至爱， 
                        在这里你将找到所有女人的时尚元素。
                    </p>
                </div>
            </li>
            <li>
                <div class="img">
                    <img src="03.jpg" alt="">
                </div>
                <div class="corver"></div>
                <div class="text">
                    <h4>金熹服饰</h4>
                    <p>商家介绍本店专营金熹女装，“金熹”即为“惊喜”。它会是你的衣橱至爱， 
                        在这里你将找到所有女人的时尚元素。
                    </p>
                </div>
            </li>
        </ul>
    </div>

    <script src="jquery.js"></script>
</body>

</html>
<script>
     //边框
    $('.box-border').hover(function(){
        $(this).stop().fadeTo(1000,1);
    },function(){
         $(this).stop().fadeTo(1000,0);
    });
   
    //图片的遮罩层
    $('.bottom-list>li').hover(function(){
        $(this).find('.corver').stop().fadeIn(1000);
        $(this).find('.text').stop().animate({left:0},600);
    },function(){
           $(this).find('.text').stop().animate({left:-175},600);
           $(this).find('.corver').stop().fadeOut(1000);
    });

</script>